<!-- 物流线路 - 表单编辑页面 -->
<template>
  <div class="page-container">


    <!-- <el-form ref="formEl" :model="formValue" label-width="0px" class="common-form-panel-div" style="margin-top: 20px;">
      <el-row>
        <el-col :span="3">
          <el-form-item>

            <div style="display: flex;">
              <div style="width: 240px;">跟踪号</div>
              <div>
                <div style=" flex: 1; display: flex; ">
                  <div style="width: 200px; ">时间</div>
                  <div>跟踪信息</div>
                </div>
              </div>
            </div>

            <div style="display: flex;">
              <div style="width: 240px;">{{ trackNumber }}</div>
              <div>
                <div v-for="subItem, subIndex in trackData.trackList" style=" flex: 1; display: flex; ">
                  <div style="width: 200px; ">{{ $dateFormat(subItem.trackTime) }}</div>
                  <div>
                    {{ subItem.trackDesc }}
                    {{ subItem.trackRemark ? ' （' + subItem.trackRemark + '）' : '' }}
                  </div>
                </div>
              </div>

            </div>

          </el-form-item>
        </el-col>
      </el-row>


    </el-form> -->
<div class="trackMain">
    <div class="orderTitle">{{$t('label_order_code')}}:{{ trackNumber }}</div>
    <el-timeline :reverse="true">
      <el-timeline-item
        v-for="(activity, index) in this.trackData"
        :key="index"
        :color="activity.color"
        :timestamp="$dateFormat(activity.trackTime)">
          {{ activity.trackDesc }}
          {{ activity.trackRemark ? ' （' + activity.trackRemark + '）' : '' }}
      </el-timeline-item>
    </el-timeline>
  </div>
</div>
</template>
<script>
import router_params from '@/mixin/router_params';
export default {
  title: 'label_order_track',
  components: {},
  mixins: [router_params],
  data() {

    return {

      keyword: '',

      trackData: [],
      formValue: {},
      trackNumber:''
    };
  },

  created() {

  },

  mounted() {

  },
  methods: {
    init_data_default(into_params) {
      this.$emit("tagModifyLabel", {
          _key: 'label_name_code',
          name: this.$t("label_order_track"),
          code: into_params.trackNumber || ""
        })
      if (into_params.trackNumber) {
        this.trackNumber = into_params.trackNumber
        this.queryTrack(into_params)
      }
    },
    queryTrack(into_params) {
      this.$ajax({
        url: '/tms-api/transport/TmsTrackRpc/express_track.json',
        data: {
          trackNumber:into_params.trackNumber,
          trackId:into_params.trackId
        },
        success: (response) => {
          if (response.data) {
            this.trackData = [
                ...response.data.trackList.map(item=>{
                item.color='#409EFF'
                return item
              }),
              ...response.data.unFinishedTrackList
            ]
          }

          if (!this.trackData && this.trackData.length == 0) {
            this.$message({
              type: 'error',
              message: '暂无跟踪信息'
            })
          }
        }
      });


    },


  }
};

</script>
<style>
.orderTitle{
  margin-bottom: 40px;
}

.trackMain{
  padding-left: 100px;
  padding-top: 60px;
}
</style>
